import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import {
    ListItem,
    ListInfo,
    LoadMore
} from '../style'
import { actionCreators } from '../store'

class List extends PureComponent{
   render() {
       const {articleList, getMoreList} = this.props;
       return(
           <div>
              {
                  articleList.map((item, index) => {
                      return (
                        <Link key={index} to={"/detail/" + item.get('id')}>
                            <ListItem>
                                <img alt='' className='pic' src={item.get('imgUrl')} />
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                      )
                  })
              }
              <LoadMore onClick={getMoreList}>阅读更多</LoadMore>
           </div>
       )
   }
}

const mapState = (state) => {
   return {
    articleList: state.getIn(['home', 'articleList'])
   }
}

const mapDispatch = (dispatch) => {
   return {
     getMoreList() {
       dispatch(actionCreators.getMoreData())
     }
   }
}

export default connect(mapState, mapDispatch)(List);